<template>

  <div id="productList" class="productList">
    <!-- header -->
    <yd-navbar slot="navbar" fixed>
      <a @click="$router.go(-1)" slot="left">
        <yd-navbar-back-icon></yd-navbar-back-icon>
      </a>
      <span slot="center" style="font-size:18px">全部商品</span>
    </yd-navbar>

    <!-- content -->
    <div class="content-productList" fixed>
      <el-table :data="tableData5" height="550" border style="width: 100%">
        <el-table-column type="expand" width="30">
          <template scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="商品 ID">
                <span>{{ props.row.id }}</span>
              </el-form-item>
              <el-form-item label="商品名称">
                <span>{{ props.row.name }}</span>
              </el-form-item>
              <el-form-item label="分类ID">
                <span>{{ props.row.categoryId }}</span>
              </el-form-item>
              <el-form-item label="商品描述">
                <span>{{ props.row.subtitle }}</span>
              </el-form-item>
              <el-form-item label="商品主图">
                <span>{{ props.row.mainImage }}</span>
              </el-form-item>
              <el-form-item label="商品价格">
                <span>{{ props.row.price }}</span> ￥
              </el-form-item>
              <!--
              <el-form-item label="库存">
                <span>{{ props.row.stock }}</span>
              </el-form-item>
              -->
              <el-form-item label="状态">
                <span v-if="props.row.status=='0'">已下架</span>
                <span v-if="props.row.status=='1'">在售</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="ID" prop="id" width="60">
        </el-table-column>
        <el-table-column label="名称" prop="name">
        </el-table-column>
        <el-table-column label="描述" prop="subtitle">
        </el-table-column>
        <el-table-column label="操作" width="110">
          <template scope="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="deleteRow(scope.$index,scope.row,tableData5)">删除</el-button>
          </template>
        </el-table-column>
        <!--  
        <el-table-column fixed="right" label="操作" width="100">
          <template scope="scope">
            <el-button @click.native.prevent="deleteRow(scope.$index, tableData5)" type="text" size="small">
              移除
            </el-button>
          </template>
        </el-table-column>
        -->
      </el-table>
      <div class="block" style="padding:5px 0;width:100%;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 50,100]"
          :page-size="this.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="this.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from '../../axios'
  import baseService from '../../axios/'
  
  export default {
    props: ['val'],
    name: 'productList',
    data() {
      return {
        total: 400,
        pageNum: 1,
        pageSize: 10,
        tableData5: [
        // {
        //   id: '产品ID',
        //   name: '商品名称',
        //   categoryId: '类别',
        //   subtitle: '商品描述',
        //   mainImage: '主图',
        //   price: '价格',
        //   status: '库存'
        // }, {
        //   id: '12987123',
        //   name: '好滋好味鸡蛋仔',
        //   category: '江浙小吃、小吃零食',
        //   desc: '荷兰优质淡奶，奶香浓而不腻',
        //   address: '上海市普陀区真北路',
        //   shop: '王小虎夫妻店',
        //   shopId: '10333'
        // }
        ]
      }
    },
    mounted() {
      this.ProductList(1,10)
    },
    methods: {
      deleteRow(index, row, rows) {
        console.log(index, row);
        rows.splice(index, 1);

      },
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleSizeChange(val){
        // console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.ProductList(this.pageNum,this.pageSize);
        
      },
      handleCurrentChange(val) {
        this.pageNum = val;
        // console.log(this.pageNum);
        this.ProductList(this.pageNum,this.pageSize);
      },
      ProductList(pageNum,pageSize){
        let param = new URLSearchParams();
        console.log(`页容量 ${pageSize} 条`);
        console.log(`页码： ${pageNum} `);
        param.append("pageNum", pageNum);
        param.append("pageSize", pageSize);
        baseService.post('/manage/product/getList.do', param).then((res) => {
          if (res.data.status == 10 || res.data.status == 1) {
            this.$dialog.alert({
              mes: res.data.msg
            });
            this.$router.push({
              path: '/user/login'
            })
          }

          if (res.data.status == 0) {
            this.total = res.data.data.total;
            this.tableData5 = res.data.data.list;
            console.log(this.tableData5)
          }
        })
      }

    }
  }

</script>

<style>
  .productList .content-productList {
    position: fixed;
    padding-top: 13%;
    height: 100%;
    width: 100%;
    /*overflow-y: auto !important;*/
    
  }

  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

  .el-form--inline .el-form-item {
    display: table-row;
    width: 100%;
  }

  .el-table__expanded-cell {
    padding: 20px 20px;
  }

  .el-form--inline .el-form-item {
    text-align: left;
  }

  .el-table .cell {
    text-align: left;
    white-space: nowrap;
    /*多出部分隐藏 */
  }

  .el-table .cell,
  .el-table th>div {
    padding-left: 10px;
  }

  .el-table__fixed,
  .el-table__fixed-right {
    box-shadow: -0px 0 0px #d3d4d6 !important;
    /* 阴影效果去除*/
  }

  .el-table__expand-icon {
    float: left;
    margin-left: 3px;
  }

  .el-button+.el-button {
    margin-left: 0px;
  }

</style>
